<template>
  <div>
    <div style="margin-left: 1080px;">
      <el-form>
        <el-form-item>
          <el-button type="success" @click="openDialog(null)">新增</el-button>
          <!-- <el-button type="primary" @click="">导出</el-button> -->
          <el-button :disabled="!logic.hasSelection" type="danger" @click="deleteSelected">删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-form :inline="true"  class="demo-form-inline">
    <el-form-item label="名称">
      <el-input  v-model="model.ExamineProjectName" clearable />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="GetProject">查询</el-button>
    </el-form-item>
  </el-form>
    </div>

    <el-table
      ref="tableRef"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="onSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" width="55" label="序号" />
      <el-table-column prop="examineProjectName" label="名称" width="180" />
      <el-table-column prop="examineName" label="检验类型" width="120" />
      <el-table-column prop="projectMethod" label="作业方式" width="120" />
      <el-table-column prop="projectStandard" label="标准值" width="120" />
      <el-table-column prop="unit" label="单位" width="80" />
      <el-table-column prop="upperLimit" label="上限值" width="120" />
      <el-table-column prop="lowerLimit" label="下限值" width="120" />
      <el-table-column prop="projectRemark" label="备注" />
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button link type="primary" @click="openDialog(scope.row)">编辑</el-button>
          <el-button link type="danger" @click="deleteRows(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-left: 980x;">
     <el-pagination
      v-model:current-page="paing.PageIndex"
      v-model:page-size="paing.PageSize"
      :page-sizes="[10,20,30,40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="paing.totalCount"
    />
    </div>

    <el-dialog v-model="logic.dialogOpen" :title="logic.dialogTitle" width="600" align-center draggable>
      <el-form :model="form" :label-width="120">
        <el-form-item label="名称">
          <el-input v-model="form.examineProjectName" />
        </el-form-item>
        <el-form-item label="检验类型">
        
          <el-select v-model="form.examineId" >
            <el-option v-for="item in types"  :label="item.examineName" :value="item.examineId"/>
      
          </el-select>
        </el-form-item>
        <el-form-item label="作业方式">
          <el-input v-model="form.projectMethod" />
        </el-form-item>
        <el-form-item label="标准值">
          <el-input v-model.number="form.projectStandard" />
        </el-form-item>
        <el-form-item label="单位">
         
           <el-select v-model="form.unit">
            <el-option value="mm">毫米</el-option>
            <el-option value="cm">厘米</el-option>
            <el-option value="m">米</el-option>
            <el-option value="g">克</el-option>
            <el-option value="kg">千克</el-option>
            <el-option value="h">小时</el-option>
            <el-option value="pc">次数</el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="上限值">
          <el-input v-model.number="form.upperLimit" />
        </el-form-item>
        <el-form-item label="下限值">
          <el-input v-model.number="form.lowerLimit" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.projectRemark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="logic.dialogOpen = false">取消</el-button>
          <el-button type="primary" @click="saveRow">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  
</template>

<script lang="ts" setup>
import { ref, reactive,onMounted,watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { APIs } from '@/Http/http'
onMounted(()=>{
  GetProject();
})


interface ProjectRow {
  id: number
  name: string
  inspectType: string
  workMode: string
  standard: number | string
  unit: string
  upper: number | string
  lower: number | string
  remark: string
}

const tableRef = ref()
const tableData = ref<any>([])

const model=reactive({
  ExamineProjectName:""
})

const paing=reactive({
  PageIndex:1,
  PageSize:10,
  totalCount:0,
  total:1
})
watch(paing,()=>{
  GetProject();
})

const GetProject=()=>{
  APIs.get("/api/Read/GetExamineProject",{
    params:{
ExamineProjectName:model.ExamineProjectName,
PageIndex:paing.PageIndex,
PageSize:paing.PageSize
    }
  }).then(res=>{
    tableData.value=res.data.data.data;
    paing.totalCount=res.data.data.totalCount;
    paing.total=res.data.data.total
  })
}

const selectedIds = ref<any[]>([])




const logic = reactive({
//是否禁用
  hasSelection: false,
  //是否打开对话框
  dialogOpen: false,
  //标题
  dialogTitle: '新增',
  isAdd:false
})
//获取检验类型
const types=ref<any>([])
const GetType=()=>{
  APIs.get("/api/Read/ShowExamineType").then(res=>{
    types.value=res.data.data;
  })
}

const form = reactive({
  examineProjectId:0,
  examineProjectName: "",
  examineId: "",
  projectMethod: "",
  projectStandard: "",
  unit: "",
  upperLimit: "",
  lowerLimit: "",
  projectRemark: "",
})

const onSelectionChange = (val: any[]) => {
  selectedIds.value =val
 logic.hasSelection=selectedIds.value.length>0
  
}

const openDialog = (row:any) => {

GetType();
  logic.dialogOpen = true
  if(row==null)
{

  logic.isAdd=true;
  form.examineProjectId=0
  form.examineProjectName="";
  form.examineId="";
  form.projectMethod="";
  form.projectStandard="";
  form.unit="";
  form.upperLimit="";
  form.lowerLimit="";
  form.projectRemark=""
}
else
{
  logic.isAdd=false;
  logic.dialogTitle="修改"
  form.examineProjectId=row.examineProjectId;
  form.examineProjectName=row.examineProjectName;
  form.examineId=row.examineId;
  form.projectMethod=row.projectMethod;
  form.projectStandard=row.projectStandard;
  form.unit=row.unit;
  form.upperLimit=row.upperLimit;
  form.lowerLimit=row.lowerLimit;
  form.projectRemark=row.projectRemark

}


}



const saveRow = () => {
 
  if(logic.isAdd)
  {
     if (!form.examineProjectName) {
    ElMessage.warning('请填写名称')
    return
     }
    APIs.post("/api/Write/AddProject",form).then(res=>{
      if(res.data.code==100)
    {
        ElMessage.success(res.data.msg);
       logic.dialogOpen = false
         GetProject();
    }
    else
    {
       ElMessage.error(res.data.msg);

      return;
    }
    })
     
  }else
  {
     APIs.post("/api/Write/UpdateProject",form).then(res=>{
      if(res.data.code==100)
    {
        ElMessage.success(res.data.msg);
       logic.dialogOpen = false
         GetProject();
    }
    else
    {
       ElMessage.error(res.data.msg);

      return;
    }
    })

  }


}

const deleteRows = (row:any) => {
    ElMessageBox.confirm(
    '确认要删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      APIs.delete("/api/Write/DeleteProject",{
        params:{ExamineProjectId:row.examineProjectId}
      }).then(res=>{
        if(res.data.code==100)
      {
     ElMessage.success(res.data.msg)
     GetProject();
      }
      else
      {
         ElMessage.error(res.data.msg)
        return;
      }
      
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

const deleteSelected = () => {
  var projects=selectedIds.value.map((row)=>row.examineProjectId).toString();
   ElMessageBox.confirm(
    '确认要删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      
  APIs.delete("/api/Write/AllDeleteProject",{
    params:{projectarray:projects}
  }).then(res=>{
    if(res.data.code==100)
  {
    ElMessage.success(res.data.msg);
    GetProject();
  }
  else
  {
     ElMessage.error(res.data.msg);
     return;
  }
  })

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
  
}

/* const exportCSV = () => {
  // 简单前端导出为 CSV
  const headers = ['名称','检验类型','作业方式','标准值','单位','上限值','下限值','备注']
  const rows = tableData.value.map(r => [r.name, r.inspectType, r.workMode, r.standard, r.unit, r.upper, r.lower, r.remark])
  const csv = [headers, ...rows].map(row => row.map(col => `"${String(col).replace(/"/g, '""')}"`).join(',')).join('\n')
  const blob = new Blob(["\ufeff" + csv], { type: 'text/csv;charset=utf-8;' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = '质量项目.csv'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
} */
</script>



